<template>

    <div id="toolbar" class="toolbar">
      <Tooltip content="查询条件" placement="bottom" v-show="showFilter">
      <Button type="ghost" shape="circle" icon="search" @click="toggleSearchFilter" v-show="showFilter"></Button>
      </Tooltip>
      <Tooltip content="刷新" placement="bottom" v-show="showRefresh">
      <Button type="ghost" shape="circle" icon="ios-reload"  v-show="showRefresh"></Button>
      </Tooltip>
      <Tooltip content="新建" placement="bottom" v-show="showCreate">
      <Button type="ghost" shape="circle" icon="android-add" v-show="showCreate" @click="goCreate"></Button>
      </Tooltip>
      <Tooltip content="导出" placement="bottom" v-show="showExport">
      <Button type="ghost" shape="circle" icon="ios-cloud-download-outline"  v-show="showExport"></Button>
      </Tooltip>
      <Tooltip content="帮助" placement="bottom" v-show="showHelp">
      <Button type="ghost" shape="circle" icon="ios-help-outline"  v-show="showHelp"></Button>
      </Tooltip>
    </div>
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    props: ['filter', 'refresh', 'create', 'help', 'export', 'create_link'],
    name: 'tool-bar',
    data: function () {
      return {}
    },
    computed: {
      showFilter () {
        return this.filter
      },
      showRefresh () {
        return this.refresh
      },
      showCreate () {
        return this.create
      },
      showExport () {
        return this.create
      },
      showHelp () {
        return this.help
      }
    },
    methods: {
      ...mapActions(['toggleSearchFilter']),
      goCreate () {
        this.$router.push({ path: this.create_link })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .toolbar {
    border-top: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    border-left: 0;
    box-sizing: border-box;
    height: 55px;
    min-height: 55px;
    line-height:55px;
    width: 100%;
    flex: 1 1 0;
    background: rgb(255, 255, 255);
    margin-bottom: 10px;
    #box-shadow: 0 3px 3px  #c4c4c4;
  }


</style>
